import {
  initQiniuUploadApi,
  uploadFileToQiniu
} from '../../api/upload'
import {
  fetchGetUserProfile
} from '../../api/login'
import { showWxToast, getRandomIndex } from '../../utils/util';
import { DEFAULT_HEADIMG_LIST } from '../../assets/constant/index';

const app = getApp();


// 默认头像 用户还未进行“上传头像操作”时显示的灰色头像
// 展示该头像的时候表明需要用户上传头像
const DEFAULTAVATAR = 'https://ustatic.hudongmiao.com/joymewMp/grayAvator.png';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dialogVisible: { // 用于控制弹窗的显示/隐藏
      value: false,
      type: Boolean,
    },
  },
  observers: {
    // 弹窗出现的回调函数
    dialogVisible: function(dialogVisible) {
      if (dialogVisible) {
        // 授权的登录弹窗出现
        console.log(this.data.dialogVisible);
        // 初始化七牛云配置
        // 此方法(异步)执行完就可以执行七牛上传接口了
        initQiniuUploadApi();
      }
    },
    // 头像已经裁剪好的回调函数
    // 调用接口上传头像
    avatarCropped: function(newVal) {
      if (newVal) {
        this.setData({
          avatarUrl: newVal,
        });
        console.log('上传服务器前的图片地址:', this.data.avatarUrl);
        this.uploadAvatar(this.data.avatarUrl);
      }
    },
  },
  data: {
    avatarUrl: DEFAULTAVATAR, // 当前展示的头像
    avatarUncropped: '', // 用于记录裁剪前的头像
    avatarCropped: '', // 用于记录裁剪后的头像
    nickName: '', // 当前展示的昵称
  },
  attached() {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 确认授权的回调函数
    // 调用接口保存设置好的头像、昵称
    // 触发关闭弹窗事件，该事件会在父组件中执行“关闭授权弹窗”逻辑
    openAuthNew: async function() {
      let that = this;
      if (!this.data.avatarUrl || this.data.avatarUrl === DEFAULTAVATAR) {
        wx.showModal({
          title: '提示',
          content: '请上传头像!',
          cancelText: '默认头像',
          confirmText: '知道了',
          success: function(sm) {
            if (sm.confirm) {
              console.log('用户点击确认');
            } else if (sm.cancel) {
              // 用户拒绝 从默认头像库中选取随机头像
              const AVATARS = DEFAULT_HEADIMG_LIST;
              const tmpLen = AVATARS.length;
              that.setData({
                avatarUrl: AVATARS[getRandomIndex(0, tmpLen)],
              });
            }
          },
        });
        return;
      }
      if (!this.data.nickName) {
        wx.showModal({
          title: '提示',
          content: '请填写姓名!',
          cancelText: '默认姓名',
          confirmText: '知道了',
          success: function(sm) {
            if (sm.confirm) {
              console.log('用户点击取消');
            } else if (sm.cancel) {
              // 设置默认姓名
              that.setData({
                nickName: `嗨喵用户${getRandomIndex(0, 9999)}`,
              });
            }
          },
        });
        return;
      }
      const fetchGetUserProfileRes = fetchGetUserProfile({
        name: this.data.nickName,
        avatar: this.data.avatarUrl,
      })
      const {
        info
      } = fetchGetUserProfileRes.data
      wx.setStorageSync('avatar', info.avatar)
      wx.setStorageSync('name', info.realName)
      this.triggerEvent('dialogClose');
    },
    // 关闭授权弹窗
    // 触发dialogClose事件 dialogClose事件会在父组件中执行”关闭授权弹窗“逻辑
    closeAuth: function() {
      this.triggerEvent('authFail');
    },
    // 选择头像的回调函数
    // 展示头像、裁剪前的头像赋值
    onChooseAvatar: function(e) {
      console.log(e);
      const { avatarUrl } = e.detail;
      this.setData({
        avatarUrl,
        avatarUncropped: avatarUrl,
      });
    },
    // 取消裁剪的回调函数
    // 清空data中的avatarUncropped(裁剪前的图片地址)
    // 清空data中的avatarUrl(界面上正在展示的头像)
    handleCancelCropper() {
      this.setData({
        avatarUncropped: '',
        avatarUrl: '',
      });
    },
    // 确认裁剪的回调函数
    // 清空data中的avatarUncropped(存放裁剪前的头像)
    // 给data中的avatarCropped赋值(存放裁剪后的头像)
    handleConfirmCropper(e) {
      this.setData({
        avatarUncropped: '',
        avatarCropped: e.detail,
      });
    },
    // 用户输入框失焦回调函数
    // 1、发起隐私接口授权请求
    // 2、给data中的nickName赋值
    userNameBlur: function(e) {
      console.log(e);
      if(wx.requirePrivacyAuthorize) {
        wx.requirePrivacyAuthorize({});
      }
      this.setData({
        nickName: e.detail.value,
      });
    },
    // 上传头像 
    // 给data中的avatarUrl赋值
    // 界面上会展示上传好的头像
    uploadAvatar: function(avatarPath) {
      uploadFileToQiniu(avatarPath)
        .then(res => {
          console.log(res);
          this.setData({
            avatarUrl: res.imageURL,
          });
        })
        .catch(err => {
          console.log(err);
          showWxToast('头像上传失败!请重新进入小程序!');
        });
    },
  },
});
